* {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
ul li{
    list-style: none;
    padding: 0;
    margin: 0;
}
.navbar {
    height: 2.55rem;
    line-height: 2.55rem;
    color: #fff;
    background: #e54847;
    border-bottom: 1px solid #e54847;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .h1-title {
        font-size: .9rem;
        color: #fff;
        font-weight: 400;
        width: 13.5rem;
        text-align: center;
    }
    .mui-title {
        left: 2.5rem;
        right: 2rem;
    }
}

    // 头部导航样式
    .nav-fixed {
        &::after {
            content: "";
        }
        .nav {
            width: 100%;
            height: 2.55rem;
            line-height: 2.5rem;
            background: #f03d37;
            position: fixed;
            z-index: 999;
            h1 {margin: 0;
                font-weight: normal;
                height: 100%;
                line-height: 2.5rem;
                font-size: .9rem;
                text-align: center;
                color: #fff;

            }
            a {
                background: url(https://p0.meituan.net/scarlett/f05f61e7a8f3f45fd071c068d7a26870356.png) no-repeat 0 0 /100%;
                margin-top: 1rem;
                margin-right: .75rem;
                width: .85rem;
                height: .8rem;
                float: right;
                position: relative;
                color: #333;
                &:hover {
                    ul {
                        display: block;
                    }
                }
                ul {
                    position: absolute;
                    right: 0;
                    top: 1.3rem;
                    width: 5.5rem;
                    background: #fff;
                    text-align: center;
                    box-shadow: 0px 3px 9px 3px rgba(0, 0, 0, .1);
                    display: none;
                    li {
                        &::after {
                            position: absolute;
                            content: "";
                            width: 100%;
                            border-bottom: 1px solid #f0f0f0;
                            bottom: 0;
                            left: 0;
                        }
                        font-size: .75rem;
                        position: relative;
                        height: 2.25rem;
                    }
                }
            }
        }
    }

// 中间地址选项卡样式
.option {
    position: fixed;
    width: 100%;
    z-index: 99;
    margin-top: 2.55rem;
    height: 2.2rem;
    line-height: 2.2rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    .option-city {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 19.2vw;
        font-size: .75rem;
        color: #666;
        margin-left: .75rem;
        i {
            width: 0;
            height: 0;
            border: .2rem solid #b0b0b0;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            display: inline-block;
            margin-left: .2rem;
            margin-top: .25rem;
        }
    }
    .option-menu {
        width: 12rem;
        margin-right: .5rem;
    }
    .option-seek {
        margin-right: .75rem;
        display: flex;
        align-items: center;
        img {
            width: 1rem;
            height: 1rem;
        }
    }
}

// 中间选项卡的样式更改
//中间选项卡切换样式 
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
    font-weight: 700;
    color: #000000;
    border-bottom: 2px solid #f03d37;
    background: 0 0;
    font-size: .85rem;
}
.mui-segmented-control {
    font-size: .75rem;
    font-weight: 700;
}
//中间选项卡行高
.mui-segmented-control .mui-control-item {
    line-height: 1.9rem;
}

.mui-segmented-control .mui-control-item {
    display: inline;
    padding: .3rem .5rem;
}
.mui-scroll-wrapper {
    overflow:visible;
}
// 最受欢迎的电影列表
.hot-showing {
    background: #fff;
    overflow: hidden;
    width: 100% !important;
    height: 10rem;
    padding-top: .6rem;
    padding-left: .75rem;
    padding-right: .75rem;
    .hot-popular {
    font-size: .7rem;
    color: #333;
    margin-bottom: .6rem;
    }
}
.hot-showing-list {
    overflow: hidden;
    height: 10rem !important;
}
.hot-list {
    border-bottom: none !important;
    padding: 0 .5rem 0 0 !important;
    img {
        width: 4.25rem;
        height: 5.75rem;
        display: block;
        margin-bottom: .3rem;
    }
    p {
        width: 4.25rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: .65rem;
        text-align: left;
        font-size: .65rem;
        color: #222;
    }
}
//电影列表样式
.movie-list {
    margin-top: .5rem;
    ul {
        background: #fff;
        li {
            &:nth-last-of-type(1)::after {
                top: 100%;
            }
            &::after {
                content: "";
                border: 1px solid #e6e6e6;
                width: 100%;
                position: absolute;
                top:99%;
                left: 23%;
            }
            overflow: hidden;
            position: relative;
            display: flex;
            padding: .6rem .75rem ;
            align-items: center;
            justify-content: space-between;
            p {
                margin-bottom: 0;
            }
            .movie-img {
                margin-right: .5rem;
                img {
                    width: 3.2rem;
                    height: 4.5rem;
                }
            }
            .movie-message {
                margin-left: -1rem;
                width: 60%;
                p {
                   text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap; 
                    width: 100%;
                }
                .movie-title {
                    height: 1.1rem;
                    font-size: .85rem;
                    color: #333;
                    font-weight: 700;
                    span {
                        line-height: 1rem;
                        vertical-align: middle;
                        margin: .1rem auto auto .25rem;
                        img {
                            width: 2.15rem;
                            height: auto;
                        }
                    }   
                }
                .comment {
                    height: 1rem;
                    line-height: 1rem;
                    font-size: .65rem;
                    color: #666;
                    span {
                        font-size: .75rem;
                        color: #faaf00;
                        font-weight: 700;
                    }
                }
                .actor {
                    height: 1rem;
                    line-height: 1rem;
                    font-size: .65rem;
                    color: #666;
                }
                .play-number {
                    height: 1rem;
                    line-height: 1rem;
                    font-size: .65rem;
                    color: #666;
                }
            }
            .movie-buy {
                width: 2.35rem;
                height: 1.35rem;
                line-height: 1.4rem;
                text-align: center;
                box-sizing: border-box;
                background-color: #f03d37;
                color: #fff;
                border-radius: .2rem;
                white-space: nowrap;
                font-size: .6rem;
                cursor: pointer;
            }
        }
    }
}
// 热门影人样式
.hot-star {
    margin-top: .5rem;
}
// 娱乐热点样式
.hot-recreation {
    margin-top: .5rem;
    height: auto !important; 
    margin-bottom: 2.5rem;
    .hot-popular-list {
        li {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: .7rem;
            color: #333;
            line-height: 1.65rem;
        }
    }
}
// 底部导航样式
.foot-nav {
    height: 2.5rem;
    box-sizing: border-box;
    color: #696969;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    a {
        color: #929292;
        &:nth-of-type(1) {
            color: #f03d37;
            svg {
                g {
                    fill: #f03d37;
                }
            }
        }
    }
    span {
        &:nth-of-type(1) {
            height: 1.25rem;
            line-height: 1.25rem;
        }
        &:nth-of-type(2) {
            font-size: .6rem;
            line-height: 1rem;
        }
        display: block;
        text-align: center;
        img {
            width: 1.25rem;
            height: 1.25rem;
        }
        svg {
            width: 1.25rem;
            height: 1.25rem;
            color: #f03d37;
        }
    }
}
.mui-bar-tab .mui-tab-item.mui-active {
    color: #f03d37;
    svg {
        g {
           fill: #f03d37; 
        }
    }
}

// 选项卡2
.item2,.item3,.item4 {
    padding-top: 1.75rem;
}
// 选项卡2三级联动样式
.item2-city {
    width: 100%;
    height: 2rem;
    z-index: 10;
    background-color: #fff;
    display: flex;
    .item {
        &::after{
            content: "";
            display: block;
            position: absolute;
            height: 1rem;
            top: .5rem;
            left: 0;
            border-left: 1px solid #e8e8e8;
        }
        -webkit-box-flex: 1;
        flex: 1;
        text-align: center;
        line-height: 2rem;
        position: relative;
        white-space: nowrap;
        overflow: hidden;
        font-size: .65rem;
        text-overflow: ellipsis;
        .drop {
            display: inline-block;
            position: absolute;
            top: .9rem;
            width: 0;
            height: 0;
            margin-left: .2rem;
            border: .2rem solid transparent;
            border-top-color: #b0b0b0;
        }
    }
}
// 影城列表样式
.item2-cineplex {
    position: relative;
    &::before {
        content: "";
            display: block;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            border-top: 1px solid #e8e8e8;
    }
    padding: .65rem .75rem;
    background: #fff;
    li {
        padding: .5rem 0;
        position: relative;
        &:nth-of-type(1) {
            padding-top: .25rem;
        }
        &::after {
            content: "";
            display: block;
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            border-bottom: 1px solid #e8e8e8;
        }
        .cineplex-name {
            line-height: 1.15rem;
            font-size: .8rem;
            color: #000;
            height: 1.15rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            span {
                display: inline-block;
                &:nth-of-type(1) {
                    font-size: .9rem;
                    color: #f03d37;
                    margin-left: .25rem;
                    margin-right: .25rem;
                }
                &:nth-of-type(2) {
                    font-size: .6rem;
                    color: #f03d37;
                }
            }
        }
        .cineplex-place {
            display: flex;
            margin-top: .25rem;
            line-height: 1rem;
            height: 1rem;
            p {
                font-size: .65rem;
                color: #666;
                height: 1rem;
                line-height: 1rem;
                &:nth-of-type(1) {
                    flex: 1;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
                &:nth-of-type(2) {
                    margin-right: .75rem;
                }
            }
        }
        .item-lable {
            line-height: 1.05rem;
            height: 1.05rem;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            span {
                display: inline-block;
                line-height: .8rem;
                font-size: .6rem;
                border: 1px solid #589daf;
                color: #589daf;
                padding: 0 .15rem;
                border-radius: .15rem;
                &:nth-of-type(2) {
                    border: 1px solid #ff9900;
                    color: #ff9900;
                }
            }
        }
        .item2-discounts {
            margin-top: .4rem;
            font-size: .6rem;
            height: 1rem;
            line-height: 1rem;
            color: #999;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            span {
                overflow: hidden;
                display: inline-block;
                width: .75rem;
                height: .7rem;
                background: url(https://p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png) no-repeat 0 0 /100%;
                position: relative;
                top: .15rem;
                margin-right: .25rem;
            }
        }

    }
}
// 选项卡3内容样式
// 近期受期待选项卡列表样式
.item3-selector {
    margin-top: 0;
    height: 10.8rem;
    a {
        div {
            position: relative;
            div {
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                height: 1.75rem;
                line-height: 2.5rem;
                position: absolute;
                bottom: 0;
                padding-left: .2rem;
                text-align: left;
                font-size: .6rem;
                color: #faaf00;
                font-weight: 600;
                background-image: linear-gradient(
                    -180deg,rgba(77,77,77,0),#000);
            }
        }
        p {
            &:nth-of-type(2) {
                font-size: .6rem;
                color: #999;
                font-weight: normal;
            }
        }
    }
}
// 播放日期以及电影列表
.movie-list {
    .play-list-date {
        li {
        &:nth-of-type(1) {
            padding-top: 0.4rem;
        }
        &:nth-last-of-type(1) {
            &::after {
                top: 99%;
            }
        }

    }
    }
    .play-date {
        background: #FFF;
        padding-left: .7rem;
        padding-top: .75rem;
        font-size: .7rem;
    }
    .want-look {
        background-color: #faaf00 !important;
    }
}
// 选项卡4样式
.want-see {
    margin-top: 0rem;
    ul {
        padding-top: .3rem;
        li {
            padding: .4rem .75rem;
            &::after {
                border: none;
            }
            .score {
                font-size: .6rem;
                align-self: flex-start;
                span {
                    color:#faaf00;
                    font-size: .75rem;
                }
            }
        }
    }
}

// 登录页样式
// 登录页样式
.nav-fixed {
    line-height: 2.55rem;
    height: 2.55rem;
    .login-nav {
        line-height: 2.55rem;
        height: 2.55rem;
        a {
            float: left;
            background: none;
            color: #fff;
            margin: auto;
            line-height: 2.55rem;
            margin-left: .5rem;
            font-size: 1.25rem;
        }
    }
}
// 主题背景颜色
.body {
    background: #f8f8f8;
}
// 美团切换手机验证样式
.login-select {
    display: table-cell !important;
    font-weight: normal;
}
.body {
    .option-menu {
        
        .mui-active {
            font-size: .75rem !important;
            font-weight: normal !important;
            border-bottom: .2rem solid #ffc300 !important;
            z-index: 22;
            position: relative;
        }
    }
}
.menu-bottom {
    position: relative;
    background: #fff;
    &::after {
    content: "";
    width: 100%;
    top: 93%;
    position: absolute;
    border-bottom: .2rem solid #d6d6d6;
    z-index: 0;
    }
}
// 输入框样式
.login-input {
    background: #fff;
    input {
        margin-bottom: 0;
        font-size: .75rem;
        outline: none;
        border: none;
        line-height: 1rem;
        padding: 1rem 0;
        margin-left: .75rem;
        border-bottom: 1px solid #d6d6d6;
    }
}
.login-button {
    margin:.6rem .5rem;
    text-align: center;
    line-height: 1.5rem;
    background: #df2d2d;
    color: #FFF;
    border-radius: .15rem;
    font-size: .7rem;
}
.sign-in {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #FE8C00;
    font-size: .65rem;
    margin: .6rem .5rem;
}
.login-service {
    text-align: center;
    font-size: .7rem;
    span {
        color: #f03d37;
    }
}
// 手机登录input样式
.phone-login-button {
    background: #dcdcdc;
    color: #999;
}
.phone-input {
    .verification {
        right: .25rem;
        height: 1.5rem;
        top: .25rem;
        line-height: 1.5rem;
        position: absolute;
        border-radius: .15rem;
        padding: 0 .75rem;
        font-size: .6rem;
}
}



